<template>

	<section class="login">

		<div id="app">
			<div class="Mine_header">
				<div class="Mine_img">
					<router-link to="/" class="router">
						<img src="../assets/Mine/Header_arrow.png" />
					</router-link>
				</div>
				<div class="Mine_text">
					<div>登录</div>
				</div>
			</div>
		</div>

		<div class="SignIn_inp">
			<p><input type="text" v-model="cellphone" placeholder="手机号" /></p>
			<p><input type="password" v-model="password" placeholder="密码" /></p>
			<button @click="loginBtn">登录</button>
			<ul>
				<li>
					<img src="../assets/main_img/Suo.png" /> 忘记密码
				</li>
				<li>
					<router-link to="/Registered">
						<img src="../assets/main_img/Phone.png" /> 快速注册
					</router-link>
				</li>
			</ul>
		</div>
	</section>

</template>

<script>
	// require('../../static/js/toast.js');
	// require('zepto'); //引入模块
	// import $ from "zepto";
	import { login } from "../api/api";
	import AddressHeader from "./Address_header.vue";
	export default {
		name: "login",
		props: [],
		created () {
			console.log(this.$route);	
		},
		mounted() {},
		data() {
			return {
				title: '登录',
				cellphone: '',
				password: ''
			};
		},
		components: {
			AddressHeader: AddressHeader
		},
		methods: {
			back() {
				this.$router.back(-1);
			},
			//登录请求
			login(){
				/* 专门用来写请求逻辑 */
				const params = new URLSearchParams();
				params.append('cellphone', this.cellphone);
				params.append('password', this.password);
				login(params).then(res=>{
					const data = res.data;
					if(data.code === 200){
						//正常登录
						alert('登录成功');
						// 存数据
						sessionStorage.setItem('userInfo',JSON.stringify(data.data));
						// this.$router.push({path:'Mine'});
						console.log(this.$route.query);
						this.$router.push(this.$route.query.redirect || '/Mine')
					}else{
						alert(data.data);
					}
				})
			},
			//登录校验
			loginBtn(){
				/* 专门用来写检验逻辑 */
				if(this.cellphone === ""){
					alert("请输入手机号");
					return;
				}
				if(this.password === ""){
					alert("请输入密码");
					return;
				}
				/* 专门用来写检验逻辑 */

				// 请求登录
				this.login();
				
			}
		},
		computed: {}
	};
</script>

<style scoped>
	@import url("../../config/css/Mine.css");
	.login {
		width: 100%;
		overflow: hidden;
	}
	
	.SignIn_inp {
		width: 100%;
		overflow: hidden;
	}
	
	.SignIn_inp input:nth-last-child(1) {
		margin-top: 0.3rem;
	}
	
	.SignIn_inp input {
		width: 6.5rem;
		height: 0.8rem;
		margin-left: 0.27rem;
		padding: 0 0.2rem;
		font-size: 0.25rem;
		border: 0.01rem solid #f2f2f2;
	}
	
	.SignIn_inp button {
		width: 6.73rem;
		height: 0.8rem;
		border-radius: 0.06rem;
		border: none;
		background: #eb1625;
		color: white;
		font-size: 0.38rem;
		margin: 0.27rem 0.27rem 0 0.36rem;
	}
	
	.SignIn_inp ul li {
		float: left;
		font-size: 0.1rem;
		color: #323232;
		margin-top: 0.1rem;
	}
	
	.SignIn_inp ul li a {
		color: #323232;
	}
	
	.SignIn_inp ul li img {
		width: 0.25rem;
		height: 0.25rem;
		padding: 0 0.02rem 0 0;
		vertical-align: middle;
	}
	
	.SignIn_inp ul li:nth-last-child(1) {
		float: right;
		margin-right: 0.4rem;
	}
	
	.SignIn_inp ul li:nth-last-child(2) {
		margin-left: 0.35rem;
	}
</style>